<script setup>
    import ContentCard from '../../../components/ContentCard.vue'
    import AgricultureGraph from './AgricultureGraph.vue'
    import AgricultureCurve from './AgricultureCurve.vue'
    import { getFacilityDetails, getFacilityTodayData, getFacilityHistoryData, getFacilityHistoryDataTitlte, getFacilityHistoryDataTotal } from '@/api/agriculture'
    import { nextTick } from 'vue'

    // 设备id
    let facId = $ref(null)

    // 显示详情
    let showDialog = $ref(false)

    // 设备详情
    let detailsData = $ref({})

    // 数据加载中
    let dataLoading = $ref(false)


    // 历史数据参数
    let params = $ref({
        pageNum: 1,
        pageSize: 20,
    })

    const showDetail = (facid, id) => {
        todayData = []
        facId = facid
        params.facId = facId
        showDialog = true
        dataLoading = true
        currentTabIndex = 0

        // 获取设备详情
        getFacilityDetails({ id }).then(res => {
            dataLoading = false
            if(res.success){
                detailsData = res.result
            }
        })

        getTodayData()
        getTitle()
        getTotal()
        getHistoryData()
    }

    // 获取今日数据统计数据
    let todayData = $ref([])
    let todayDataLoading = $ref(true)
    const getTodayData = () => {
        getFacilityTodayData({ facId: facId }).then(res => {
            todayDataLoading = false
            if(res.success){
                todayData = res.result
            }
        })
    }

    const closeDialog = () => {
        showDialog = false
    }

    // tabbar 
    let currentTabIndex = $ref(0)
    const handleChangeTabbar = (index) => {
        currentTabIndex = index

        if(index == 1){
            this.params.pageNum = 1
            getHistoryData()
        }else{
            getTodayData()
        }
    }

    // 历史数据标题
    let historyTitle = $ref([])
    const getTitle = () => {
        getFacilityHistoryDataTitlte({ facId: facId }).then(res => {
            historyTitle = res.result
        })
    }

    // 历史数据总条数
    let historyTotal = $ref(0)
    const getTotal = () => {
        getFacilityHistoryDataTotal({ facId: facId }).then(res => {
            historyTotal = Number(res.result.count)
        })
    }

    // 历史数据
    let historyData = $ref([])
    let historyDataLoading = $ref(false)
    
    const getHistoryData = () => {
        historyDataLoading = true
        getFacilityHistoryData(params).then(res => {
            historyDataLoading = false
            if(res.success){
                historyData = res.result.result ? JSON.parse(res.result.result) : []
            }
        })
    }

    // 分页
    const handleCurrentChange = (page) => {
        params.pageNum = page
        getHistoryData()
    }


    // 获取title 数量
    const getTitleCount = (obj) => {
        var t = typeof obj
        if (t == 'string') {
            return obj.length
        } else if (t == 'object') {
            var n = 0;
            for (var i in obj) {
                n++
            }
            return n
        }
        return false
    }


    defineExpose({
        showDetail,
        closeDialog
    })

</script>

<template>
    <content-card :showBack="false" v-if="showDialog" v-loading="dataLoading">

        <template #tabbar>
            <div class="tabbar-wrap flex-center">
                <div 
                    class="tab-item"
                    v-for="(tab, index) in ['今日数据', '历史数据']"
                    :key="index"
                    :class="{ active: currentTabIndex == index }"
                    @click="handleChangeTabbar(index)"
                >
                    {{ tab }}
                </div>
            </div>
        </template>
        
        <div class="agriculture-detail-wrap flex">
            <div class="left-detail">
                <div class="top-time flex">
                    <div class="title">设备信息</div>
                    <div class="time">更新时间：{{ detailsData.updateTime }}</div>
                </div>

                <div class="detail-content flex">
                    <img v-if="detailsData.photo" :src="detailsData.photo">
                    <div class="detail-content-r">
                        <div class="content-title font-b">{{ detailsData.facname }}</div>
                        <div class="desc">设备ID：{{ detailsData.facid }}</div>
                        <!-- <div class="desc">物联网卡：89860426102070849232</div> -->
                    </div>
                </div>

                <div class="fly-line-graph">
                    <agriculture-graph :facId="facId"></agriculture-graph>
                </div>

            </div>

            <div class="right-statistics">

                <!-- 今日数据统计 -->
                <div class="data-statistics-wrap">
                    <div class="title">{{ currentTabIndex ? '历史数据统计' : '今日数据统计'  }}</div>
                    <div 
                        class="list-card-bg data-statistics-list" 
                        v-loading="todayDataLoading"
                        v-if="currentTabIndex==0"
                    >
                        <ul class="list-head flex">
                            <li>通道号</li>
                            <li>名称</li>
                            <li>平均值</li>
                            <li>最小值</li>
                            <li class="statistics-time">最小值时间</li>
                            <li>最大值</li>
                            <li class="statistics-time">最大值时间</li>
                        </ul>

                        <el-scrollbar class="list-warp">
                            <ul 
                                class="list-item flex-center" 
                                v-for="(item, index) in todayData" 
                                :key="index"
                            >
                                <li>{{ item.channelNum }}</li>
                                <li class="text_overflow">{{ item.name }}</li>
                                <li>{{ item.averageVal }}</li>
                                <li>{{ item.minVal }}</li>
                                <li class="statistics-time">{{ item.minTime }}</li>
                                <li>{{ item.maxVal }}</li>
                                <li class="statistics-time">{{ item.maxTime }}</li>
                            </ul>
                        </el-scrollbar>

                    </div>

                    <!-- 历史数据 -->
                    <div 
                        class="list-card-bg history-data  data-statistics-list"
                        v-loading="historyDataLoading"
                        v-if="currentTabIndex==1"
                    >
                        <el-scrollbar style="width: 830px" calss="history-data-scrollbar">
                            <ul class="list-head flex" :style="{'width':  getTitleCount(historyTitle.title) > 5 ? 150 * getTitleCount(historyTitle.title) + 'px' : '100%'}">
                                <li 
                                    v-for="(value, key, tIndex) in historyTitle.title"
                                    :key="tIndex"
                                >
                                    {{ value }}
                                </li>
                            </ul>
    
                            <el-scrollbar class="list-warp" :style="{'width':  getTitleCount(historyTitle.title) > 5 ? 150 * getTitleCount(historyTitle.title) + 'px' : '100%'}">
                                <ul 
                                    class="list-item flex" 
                                    v-for="(item, index) in historyData" 
                                    :key="index"
                                >
                                    <li
                                        v-for="(value, key, tIndex) in historyTitle.ratio"
                                        :key="tIndex"
                                    >{{ value ? (item[key] * Number(value)).toFixed(1) : item[key] }}</li>
                                </ul>
                                <el-pagination 
                                    class="mb20"
                                    background 
                                    layout="prev, pager, next" 
                                    :total="historyTotal" 
                                    :hide-on-single-page="true"
                                    :page-size="params.pageSize"
                                    @current-change="handleCurrentChange"
                                />
                            </el-scrollbar>
                        </el-scrollbar>
                    </div>

                </div>

                <!-- 今日数据曲线 -->
                <div class="data-statistics-wrap mt30">
                    <div class="title">今日数据曲线</div>

                    <div class="list-card-bg data-statistics-list data-curve-list">
                        <div class="list-warp data-curve">
                            <agriculture-curve :facId="facId"></agriculture-curve>
                        </div>
                    </div>
                </div>


            </div>
        </div>

    </content-card>
</template>

<style lang="less" scoped>
    .tabbar-wrap{
        width: 210px;
        height: 36px;
        border-radius: 4px;
        border: 1px solid;
        border-image: linear-gradient(0deg, rgba(1,255,246,0.8000), rgba(1,255,246,0.8000)) 1 1;
        margin-right: 35px;
        overflow: hidden;

        .tab-item{
            height: 34px;
            line-height: 34px;
            flex: 1;
            color: #fff;
            text-align: center;
            cursor: pointer;

            &.active{
                background: linear-gradient(0deg, #009691, rgba(7,37,106,0));
            }
        }
    }

    .agriculture-detail-wrap{
        margin: 0 40px;

        .title{
            color: #17CAF0;
            font-size: 22px;
            font-weight: bold;
        }

        .left-detail{
            flex: 1;

            .top-time{
                align-items: center;

                .time{
                    color: #ccc;
                    margin-left: 12px;
                }
            }

            .detail-content{
                padding: 15px 12px 18px 12px;

                img{
                    width: 146px;
                    height: 98px;
                    background: #999;
                }

                .detail-content-r{
                    padding-left: 17px;
                    color: #fff;

                    .content-title{
                        padding: 12px 0;
                    }

                    .desc{
                        line-height: 30px;
                    }
                }
            }
        }

        .right-statistics{
            width: 866px;
            margin-left: 25px;

            .data-statistics-wrap{
                .data-statistics-list{
                    width: 100%;
                    height: 280px;
                    margin-top: 20px;

                    &.data-curve-list{
                        height: 330px;
                    }

                    &.list-card-bg{
                        padding: 20px;
                        background: url('../../../assets/images/project-list-bg.png') center -26px no-repeat, url('../../../assets/images/project-list-top.png') top no-repeat,  url('../../../assets/images/project-list-bottom.png') bottom no-repeat;
                        background-size: 100% 100%, 100%, 100%;
                    }

                    li{
                        width: 90px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: center;

                        &.statistics-time{
                            width: 150px;
                            flex: auto;
                        }
                    }

                    &.history-data{
                        li{
                            width: 150px;

                            &:first-child{
                                width: 200px;
                            }
                        }
                        
                        .el-pagination {
                            display: flex;
                            justify-content: flex-start;
                        }

                        .history-data-scrollbar{
                            overflow-y: hidden;
                        }


                        .history-data-scrollbar .el-scrollbar__bar.is-vertical {
                            display: none !important;
                        }



                    }
                }

                .list-warp{
                    height: 215px;
                    overflow-y: auto;

                    &.data-curve{
                        height: 300px;
                        max-height: 300px;
                        overflow: hidden;
                    }
                }

            }
        }
    }

</style>